//入口文件
import Vue from 'vue'
//导入路由的包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)

//注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)

//进入页面即读取本地的localStorage数据，如果不存在数据则复制为[]
var car = JSON.parse(localStorage.getItem('car') || '[]')
var store = new Vuex.Store({
    state:{
        //相当于data，组件中的调用方式：  this.$store.state.***
        car:car //将购物车中的商品数据，用一个数组存储起来[{id:57,count:2,price:2000,selected:false}]
    },
    mutations:{
        //相当于methods，组件中的调用方式：  this.$store.commit('方法名','按需传递唯一的参数')
        addToCar(state,goodsinfo){
            //点击加入购物车，把商品信息保存到store中的car上
            //假设在购物车中找到对应的商品
            var flag = false
            state.car.some(item=>{
                if(item.id == goodsinfo.id){//如果购物车中已经有此次购买的商品，直接修改数量即可
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true
                }
            })
            if(!flag){//如果购物车中没有此次购买的商品，直接添加即可
                state.car.push(goodsinfo)
            }
            //当更新car之后，把car数组，存储到本地的localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){
            //修改购物车中的数量值
            state.car.some(item=>{
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count)
                    return true
                }
            })
            //当修改完商品数量，将最新购物车的数量保存到本地
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFromCar(state,id){
            //根据id从store中的购物车中删除对应的那条数据
            state.car.some((item,i)=>{
                if(item.id == id){
                    state.car.splice(i,1)
                    return true
                }
            })
            //当删除完商品数量，将最新购物车的数量保存到本地
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){
            //修改选中状态
            state.car.some(item => {
                if(item.id == info.id){
                    item.selected = info.selected
                }
            })
            //当修改完商品订单选中状态后，将最新购物车的选中状态保存到本地
            localStorage.setItem('car',JSON.stringify(state.car))
        }
    },
    getters:{
        //相当于过滤器和computed，调用方式： this.$store.getters.***  
        getAllCount(state){//计算购物车中的商品数量
            var c = 0;
            state.car.forEach(item=>{
                c += item.count
            })
            return c
        },
        getGoodsCount(state){
            //获取当前购物车商品订单总数量
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.count
            })
            return o
        },
        getGoodsSelected(state){
            //订单被选中设置
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o
        },
        getGoodsCountAndAmount(state){
            //计算选中的商品数量和价格
            var o = {
                count : 0,//设置默认勾选数量为0
                amount : 0//设置默认结算金额为0
            }
            state.car.forEach(item => {
                if(item.selected){
                    o.count += item.count
                    o.amount += item.price * item.count
                }
            })
            return o
        }
    }
})

//导入时间插件包
import moment from 'moment'
//定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})

//导入vue-resource，用于数据交换json
import VueResource from 'vue-resource'
//安装vue-resource
Vue.use(VueResource)
//设置全局域名（根目录）【本次json模拟数据，不需要】
//Vue.http.options.root = "http://localhost:3000"//http://www.yuail.com/


//导入mui的样式
import './lib/mui/css/mui.min.css'
//导入mui的扩展类
import './lib/mui/css/icons-extra.css'

//按需导入mint-ui中的组件
/*import {Header,Swipe, SwipeItem,Button,Lazyload} from 'mint-ui'
Vue.component(Header.name,Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)
Vue.use(Lazyload)*/
import MintUI from 'mint-ui'
Vue.use(MintUI)
import "mint-ui/lib/style.css"

//安装图片缩略图预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


//导入自己的router模块
import router from './router.js'

//导入App组件
import app from './App.vue'

var vm = new Vue({
    el: '#app',
    render : c=>c(app),
    router, //挂载路由对象到项目实例上
    store//挂载vuex的store实例
})